<!DOCTYPE html>
<html>
<head>
  <base href="/">
  <title>订单支付 - ToyqoMall</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .payment-container {
      max-width: 1000px;
      margin: 30px auto;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 30px;
    }

    /* 保留原有样式... */

    .payment-qrcode {
      text-align: center;
      margin: 30px 0;
    }

    .payment-qrcode img {
      width: 200px;
      height: 200px;
      border: 1px solid #eee;
      padding: 10px;
    }

    .payment-qrcode p {
      margin-top: 15px;
      color: #666;
    }

    .payment-actions {
      text-align: center;
      margin-top: 30px;
    }

    .btn-pay {
      background-color: #76aa6f;
      color: white;
      border: none;
      padding: 12px 30px;
      font-size: 16px;
      font-weight: bold;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .btn-pay:hover {
      background-color: #5d9957;
    }

    .btn-cancel {
      background-color: #f0f0f0;
      color: #333;
      border: none;
      padding: 12px 30px;
      font-size: 16px;
      font-weight: bold;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 15px;
      transition: background-color 0.3s;
    }

    .btn-cancel:hover {
      background-color: #e0e0e0;
    }

    .payment-timer {
      text-align: center;
      margin-top: 20px;
      color: #ff6b6b;
      font-size: 14px;
    }

    .countdown {
      font-weight: bold;
    }

    .payment-notice {
      margin-top: 30px;
      padding: 15px;
      background-color: #fff8e1;
      border-radius: 8px;
      color: #856404;
      font-size: 14px;
    }

    .payment-success {
      display: none;
      text-align: center;
      padding: 30px;
      background-color: #f0f7ee;
      border-radius: 8px;
      margin: 30px 0;
    }

    .payment-success i {
      font-size: 60px;
      color: #76aa6f;
      margin-bottom: 20px;
    }

    .payment-success h3 {
      color: #333;
      margin-bottom: 15px;
    }

    .payment-success p {
      color: #666;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
<!-- 引入导航栏 -->
<input type="hidden" id="orderIdInput" th:value="${orderid}" />

<!-- 添加调试信息，仅在开发环境显示 -->
<div th:if="${@environment.getProperty('spring.profiles.active') == 'dev'}" style="background-color: #f8d7da; padding: 10px; margin-bottom: 10px; border-radius: 5px;">
  <p>调试信息（仅开发环境可见）：</p>
  <p>订单ID: <span th:text="${orderid}"></span></p>
  <p>订单对象: <span th:text="${order != null ? '存在' : '不存在'}"></span></p>
  <p>二维码: <span th:text="${qrcode != null ? '已生成' : '未生成'}"></span></p>
</div>

<div class="container">
  <div class="payment-container">
    <div class="payment-header">
      <h2>订单支付</h2>
      <p>请使用支付宝扫描二维码完成支付</p>
    </div>

    <div class="order-info">
      <div class="order-info-item">
        <span class="order-info-label">订单编号：</span>
        <span class="order-info-value" id="order-code" th:text="${orderid}"></span>
      </div>
      <div class="order-info-item">
        <span class="order-info-label">订单总额：</span>
        <span class="order-info-value order-total" id="order-total" th:text="${order != null ? order.money : ''}"></span>
      </div>
    </div>

    <!-- 支付二维码区域 -->
    <div class="payment-qrcode">
      <h3>请使用支付宝扫描以下二维码完成支付</h3>
      <!-- 显示后端直接生成的二维码 -->
      <div class="row">
        <div class="col-lg-6 col-md-8 m-auto">
          <div class="login-wrapper">
            <img id="qrcode" src="">
          </div>
        </div>
      </div>
    </div>

    <div class="payment-success" id="payment-success">
      <i class="fa fa-check-circle"></i>
      <h3>支付成功</h3>
      <p>您的订单已支付成功，我们将尽快为您发货</p>
      <a href="/shopping/personalinformation" class="btn-pay">查看订单</a>
    </div>



    <div class="payment-actions">

    </div>
  </div>
</div>

<script src="layui/layui.all.js"></script>
<script>
  const $ = layui.$;

  // 从 URL 中获取 orderid
  const urlParams = new URLSearchParams(window.location.search);
  const orderId = urlParams.get('id'); // 从 URL 中获取 orderid

  if (!orderId) {
    location.href = "shopping/index"; // 如果没有 orderid，重定向到首页
  }

  // 设置隐藏的 orderIdInput 的值
  document.getElementById('orderIdInput').value = orderId;

  // 发起 AJAX 请求获取二维码
  $.ajax({
    url: 'order/payment',
    data: { orderid: orderId },
    success: function(result) {
      let imgcode = result.data;
      $("#qrcode").attr("src", "data:image/png;base64," + imgcode); // 设置二维码图片
    },
    error: function() {
      layer.msg("二维码生成失败！");
    }
  });
</script>
</body>
</html>